<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{$title}</title>
    <link rel="stylesheet" href="/public/map/css/bootstrap.css">
    <link rel="stylesheet" href="/public/map/css/base.css">
    <link rel="stylesheet" href="/public/map/css/style.css">
    <style>
        .t_btn {
            margin-top: 20px;
        }

        .t_btn li {
            display: inline-block;
            margin: 0 0px 20px 20px;
        }

        .t_btn button,
        .t_a {
            display: inline-block;
            padding: 10px 5px;
            width: 80px;
            border-style: solid;
            border-width: 0;
            cursor: pointer;
            font-family: inherit;
            font-weight: bold;
            line-height: normal;
            margin: 0 0 0.5em 0;
            position: relative;
            text-decoration: none;
            text-align: center;
            display: inline-block;
            font-size: 1em;
            background-color: #2C58A6;
            border-color: #0263ff;
            color: white;
            box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset !important;
            margin-right: 0.5em;
            border-radius: 4px;
        }

        .t_height {
            line-height: 80px;
            position: absolute;
            right: 28px;
            top: 0;
        }
    </style>
</head>

<body>
    <!--main-->
    <div class="data_content">
        <div class="data_main">
           <span class="t_a show_china">返回 &nbsp;</span>
            <div class="main_center fl">
                <div class="center_text t_cos0">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                        <!--右下边框-->
                        <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                         服务区域
                    </div>
                    <div id="chart_map" style="width:100%;height:90%;"></div>
                </div>
                <div class="center_text t_cos13" style="display:none">
                    <!--左上边框-->
                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>
                    <!--右上边框-->
                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>
                    <!--左下边框-->
                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>
                    <!--右下边框-->
                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        湖南省地图
                    </div>
                    <div id="chart_13" class="chart" style="width:100%;height:90%; cursor: pointer;"></div>
                </div>
            </div>
        </div>
    </div>

</body>
    <script src="/public/map/js/jquery-2.2.1.min.js"></script>
    <script src="/public/map/js/bootstrap.min.js"></script>
    <script src="/public/map/js/common.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=dApOtvB5E3x6byHpUGHbRF1fxctCBdjw"></script>
    <script src="/public/map/js/echarts.min.js"></script>
    <script src="/public/map/js/dataTool.js"></script>
    <script src="/public/map/js/china.js"></script>
    <script src="/public/map/js/bmap.js"></script>
    <script src="/public/map/js/echarts-all.js"></script>
<script>
    $(function () {
        var geoCoordMap = JSON.parse(atob('{:base64_encode(json_encode($area))}'));
        var GZData = JSON.parse(atob('{:base64_encode(json_encode($GZData))}'));
        var select = JSON.parse(atob('{:base64_encode(json_encode($select))}'));
        console.log(select)
        echart_map();
        // echart_map中国地图
        function echart_map() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart_map'));
            var mapName = 'china';
            var toolTipData = [];
            /*获取地图数据*/
            myChart.showLoading();
            myChart.hideLoading();
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = geoCoordMap[dataItem[0].name];
                    var toCoord = geoCoordMap[dataItem[1].name];
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: dataItem[0].name,
                            toName: dataItem[1].name,
                            coords: [fromCoord, toCoord]
                        });
                    }
                }
                return res;
            };

            var color = ['#c5f80e'];
            var series = [];
            [
                ['', GZData]
            ].forEach(function (item, i) {
                series.push({
                    name: item[0],
                    type: 'lines',
                    zlevel: 2,
                    symbol: ['none', 'arrow'],
                    symbolSize: 10,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        symbol: 'arrow',
                        symbolSize: 5
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2
                        }
                    },
                    data: convertData(item[1])
                }, {
                    name: item[0],
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    symbolSize: function (val) {
                        return val[2] / 8;
                    },
                    itemStyle: {
                        normal: {
                            color: color[i]
                        }
                    },
                    data: item[1].map(function (dataItem) {
                        return {
                            name: dataItem[1].name,
                            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                        };
                    })
                });
            });

            option = {
                tooltip: {
                    trigger: 'item'
                },
                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    name:true,
                    roam: true,
                    itemStyle: {
                        normal: {
                            //          	color: '#ddd',
                            borderColor: 'rgba(147, 235, 248, 1)',
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(	47,79,79, .1)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            // shadowColor: 'rgba(255, 255, 255, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: {
                            areaColor: '#389BB7',
                            borderWidth: 0
                        }
                    }
                },
                series: series
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });

        }
        var pro_json = '';
        $.ajaxSettings.async = false;
        $.getJSON("/public/map/js/area/abcode.json",function(data){
            pro_json = data;
        });
        $.ajaxSettings.async = true;
        var chart_map = echarts.init(document.getElementById('chart_map'));
        chart_map.on('click', function(params) {
            getPro(params['name']);
        });
        $('.show_china').click(function(){
            $('.t_cos0').css('display', 'block');
            $('.t_cos13').css('display', 'none');
        });

        function getPro(name) {
            var json='';
            var c = Math.random()*10000;
            var id = pro_json[name]['id'];
            var pro = pro_json[name]['name'];
            $.ajaxSettings.async = false;
            $.getJSON("/public/map/js/area/"+id+'.json?c='+c,function(data){
                json = data;
            });
            $.ajaxSettings.async = true;
            echarts.registerMap('province', json);
            $('.center_text').css('display', 'none');
            $('.t_cos13').css('display', 'block');
            proShow(pro);
        }
        function proShow(pro){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart_13'));
            function showProvince() {
                myChart.setOption(option = {
                    // backgroundColor: '#ffffff',
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 100,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], // 文本，默认为数值文本
                        calculable: true,
                        inRange: {

                        }
                    },
                    series: [{
                        type: 'map',
                        mapType: 'province',
                        roam: true,
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(147, 235, 248, 1)',
                                borderWidth: 1,
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(	47,79,79, .1)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(128, 217, 248, 1)',
                                // shadowColor: 'rgba(255, 255, 255, 1)',
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10
                            },
                            emphasis: {
                                areaColor: '#389BB7',
                                borderWidth: 0
                            }
                        },
                        label: {
                            normal: {
                                textStyle: {
                                    fontSize: 15,
                                    fontWeight: 'bold',
                                    color:"#c5f80e",
                                }
                            }
                        },
                        animation: false,
                        data: select
                    }]
                });

            }
            $('.t_cos13 .main_title').text(pro);
            var currentIdx = 0;
            showProvince();
            // 使用刚指定的配置项和数据显示图表。
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    });
</script>
</html>
